<!-- 歌曲列表中的每一个歌曲信息 -->
<template>
	<view class="list-item" @click="toSong(index)">
		<view class="left">
			<text>{{name}}</text>
			<text>{{artists}} - {{album}}</text>
		</view>
		<view class="right">
			<image src="../../static/SongSheetInfo/播放.png"></image>
			<image src="../../static/search/更多.png"></image>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	export default {
		name: "song_item",
		props: ['name', 'artists', 'album', 'index', 'data'],
		// name 为歌曲名
		// artists为歌手名
		// album 为专辑名
		// index为当前播放的索引
		// data为当前播放的歌曲列表id
		data() {
			return {

			};
		},
		methods: {
			...mapMutations('song', ['setSongList']),
			// 跳转到播放页面
			toSong(index) {
				let data = []
				for (var i = 0; i < this.data.length; i++) {
					let item = this.data[i]
					data.push({
						id: item.id,
					})
				}
				uni.navigateTo({
					url: `/pages/song/song?index=${index}`,
					success: () => {
						this.setSongList(data)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.list-item {
		display: flex;
		justify-content: space-between;
		height: 80rpx;
		align-items: center;
		margin-bottom: 30rpx;
		width: 100%;

		.left {
			display: flex;
			flex-direction: column;

			text {
				color: #fff;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 400rpx;

				&:nth-child(1) {
					font-size: 28rpx;
					opacity: 0.8;
					margin-bottom: 8rpx;
				}

				&:nth-child(2) {
					font-size: 22rpx;
					opacity: 0.6;
				}
			}
		}

		.right {
			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 30rpx;
			}
		}
	}
</style>
